<template>
    <cardComponent class="insAppli-contnair" v-loading="isLoading" pageTitle="可灵活分期付款交易撤销查询">
        <template slot="cardBody">
            <div class="form-row">
                <el-form v-model="formData" label-width="120px" size="small">
                    <el-row>
                        <el-col :span="8">
                            <el-form-item label="账户类别: ">
                                <el-input
                                    disabled
                                    v-model="accountType"
                                    style="width: 100%; border: none"
                                ></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="主卡卡号:" label-position="left" prop="mainCardNo">
                                <el-input
                                    v-model="formData.mainCardNo"
                                    disabled
                                    style="width: 100%;"
                                ></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="7">
                            <el-form-item label="信用计划编号:">
                                <el-select
                                    placeholder="请选择信用计划编号"
                                    style="width: 100%;"
                                    @change="changeData"
                                    v-model="formData.CREDNO"
                                >
                                    <el-option
                                        v-for="(item, index) in CREDNOLIST"
                                        :key="index"
                                        :label="item.code + ' -- ' + item.label"
                                        :value="item.code"
                                    ></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-form-item size="large" label-width="0">
                        <el-button type="primary" size="small" @click="dialogTable">查 询</el-button>
                    </el-form-item>
                </el-form>
            </div>
            <div v-if="showTrial">
                <span style="margin: 12px 0;display: inline-block;">当前账户：{{accountType}}</span>
                <el-table
                    :data="tableData"
                    width="100%"
                    border
                    stripe
                    class="heard-bg business_table"
                >
                    <el-table-column label width="70">
                        <template slot-scope="scope">
                            <el-radio
                                v-model="isChecked"
                                @change="getCard"
                                :label="scope.row"
                            >{{""}}</el-radio>
                        </template>
                    </el-table-column>
                    <el-table-column label="交易日" show-overflow-tooltip width="180">
                        <template slot-scope="scope">
                            <span>{{ scope.row.PURTIME | getFormatDate(scope.row.VALDATE) }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="记账日">
                        <template slot-scope="scope">
                            <span>{{scope.row.PURDATE | formatDate}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="交易金额">
                        <template slot-scope="scope">
                            <span
                                v-if="scope.row.AMTFLAG !== '+'"
                            >{{scope.row.AMTFLAG}}{{scope.row.AMOUNT.toFixed(2)}}</span>
                            <span v-else>{{scope.row.AMOUNT.toFixed(2)}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="卡号末四位">
                        <template slot-scope="scope">
                            <span>{{scope.row.CARDEND | formatCardend}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="DESLINE1" label="交易描述"></el-table-column>
                    <el-table-column label="灵活分期标志">
                        <template slot-scope="scope">
                            <span>{{scope.row.MPFLAG === 1 ? '已申请' : '无'}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="NBRMTHS" label="灵活分期期数"></el-table-column>
                </el-table>
                <div class="footer installBillButton">
                    <el-button type="primary" size="small" @click="handleCancel()">撤 销</el-button>
                    <el-button
                        :disabled="currentPageIndex <= 0"
                        type="primary"
                        @click="handleChangePage('pre')"
                    >上一页</el-button>
                    <el-button
                        :disabled="nextButtonFlag"
                        type="primary"
                        @click="handleChangePage('next')"
                    >下一页</el-button>
                </div>
            </div>
        </template>
    </cardComponent>
</template>

<script>
import moment from 'moment';
import { mapState } from 'vuex';
import { trimString, getAccountTypeName } from '@/utils/Common';
import cardComponent from '@/components/cardComponent/cardComponent.vue';
import { isEmptyObject, setNumber, ChangePage } from '@/utils/Object';
import { get_4xxx, get_3xxx } from '@/apis/getAPIClass';

export default {
    name: 'InstallmentCancel',
    components: {
        cardComponent,
    },
    data() {
        return {
            accountType: '',
            isLoading: false, // 页面loading
            nextButtonFlag: true, // 下翻页按钮 显示控制阀
            showTrial: false,
            isChecked: {},
            // 表单数据
            formData: {
                mainCardNo: '6250523600000876',
                CREDNO: '',
            },
            CREDNOLIST: [], // 信用计划编号 下拉选择列表
            cardNumber: '',
            // 单选数据
            radioData: 2,
            tableData: [],
            rules: { // 表单校验规则
            },
            pagingDataList: [], // 翻页上送字段列表
            currentPageIndex: 0, // 当前页下一页’  按钮的显示控制阀
            currentRow: null,
            PURDATE: '',
            VALDATE: '',
            PURTIME: '',
            TRANNO: '',
        };
    },
    filters: {
        // 日期格式转换
        formatDate(val) {
            const text = `${val}`;
            return moment(text).format('YYYY-MM-DD');
        },
        // 获取日期时间转换
        getFormatDate(time, date) {
            let res = '';
            let str = '';
            let tmp = '';
            let timeStr = time.toString().trim();
            if (date !== 0) {
                tmp = `00000000${timeStr}`;
                tmp = tmp.substring(tmp.length - 8, tmp.length);
                str = tmp.substring(0, 2).concat(':').concat(tmp.substring(2, 4)).concat(':')
                    .concat(tmp.substring(4, 6));
            }
            if (date) {
                res = `${moment(`${date}`).format('YYYY-MM-DD')} ${str}`;
            }
            return res;
        },
        // 卡号末四位自动补0
        formatCardend(val) {
            return val.toString().padStart(4, '0');
        },
    },
    async mounted() {
        this.formData.mainCardNo = this.cardInfo_3004.CARDNO;
        // 获取信用计划编号 下拉选择列表
        this.getBaseData({ dictValue: 'MPNO' }, 'CREDNOLIST');
        // 获取账户类别
        this.accountType = await getAccountTypeName(this.cardList_3601, this.cardInfo_3004, this)
    },
    computed: mapState({
        cardInfo_3004: state => state.common.cardInfo_3004,
        cardList_3601: state => state.common.cardList_3601,
        defaultParams: state => state.common.defaultParams,
        defaultpinFlag: state => state.common.pinFlag,
    }),
    methods: {
        // 获取信用计划编号列表
        getBaseData(params, target) {
            this.$post.common.getBaseDataList(params).then((res) => {
                this[target] = res.data.content;
                this.formData.CREDNO = (res.data.content !== null && res.data.content.length > 0) ? res.data.content[0].code : '';
            });
        },
        // 选择需要撤销分期付款的交易明细条目
        getCard(val) {
            if (!val) return false;
            this.currentRow = val;
        },
        // 切换信用计划编号
        changeData() {
            this.isChecked = {};
        },
        // 撤销
        handleCancel() {
            if (isEmptyObject(this.isChecked)) {
                this.$message.warning('请选择需要撤销分期付款的交易明细条目！');
                return;
            }
            this.$confirm('您确认撤销吗？', '提示', { customClass: 'warning', type: 'warning' })
                .then(() => {
                    this.get_4072();
                })
                .catch(() => {
                });
        },
        // 请求4072
        async get_4072() {
            // 4072 配置请求头
            const appBody_4072 = {
                CARDNBR: '6250522500000291',
                OPTION: 1,
                OPERTP: 1,
                PINFLAG: this.defaultpinFlag,
                CREDNO: this.formData.CREDNO,
                VALDATE: this.currentRow.VALDATE, // 原始交易入账日期
                PURDATE: this.currentRow.PURDATE, // 原始交易记录日期
                PURTIME: this.currentRow.PURTIME, // 原始交易消费时间
                TRANNO: this.currentRow.TRANNO, // 原始交易流水号
                TRANTP: this.currentRow.TRANTYPE, // 原始交易类型
                NBRMTHS: this.currentRow.OUTFLAG, //分期期数
                BILLAMT: setNumber(this.currentRow.AMOUNT, 12),
                CURRNUM: "156"
            };
            const result_4072 = await get_4xxx(
                "4072",
                "灵活分期撤销",
                appBody_4072,
                this
            );
            if (!result_4072) return false;
            // 成功之后当前显示

            this.$alert(`灵活分期撤销成功,请勿重复提交 !`, `灵活分期撤销提示！`, {
                confirmButtonText: "确定",
                center: true,
                customClass: "success ",
                showClose: false
            });
            // 修改之后重新查询,避免重复发送请求
            this.dialogTable();
        },
        async dialogTable() {
            this.isChecked = {};
            this.pagingDataList = [];
            this.PURDATE = '';
            this.VALDATE = '';
            this.PURTIME = '';
            this.TRANNO = '';
            if (this.formData.CREDNO === '') {
                this.$message.warning('必须选择分期计划编号!');
                return;
            }
            this.get_3076();
        },
        async get_3076() {
            this.defaultParams.sysHead.busiName = '可灵活分期付款交易撤销查询';
            this.formData.CARDNO = this.cardInfo_3004.CARDNO;
            this.isLoading = true;
            // 3076 配置请求头
            const appBody_3076 = {
                CARDNBR: this.cardInfo_3004.CARDNO, // '6250522500000291'卡号,
                MPSTS: 1, // 查询条件 0：无 1：已申请灵活分期 2：未申请灵活分期
                OPTION: 1, // 查询类型 1－按卡号查询 2－按证件号码查询
                CUSTRNBR: '', // 证件号码 查询类型为2时，必填
                CATE: `${this.cardInfo_3004.CATEGORY}`, // 账户类别 查询类型为2时，必填
                CREDNO: this.formData.CREDNO, // 信用计划编号
                RTNIND: this.pagingDataList.length === 0 ? '' : 1, // 翻页标志 首次传空， 翻页传1
                PINFLAG: this.defaultpinFlag,
                PIN: '123456',
                VALDATE: this.VALDATE,
                PURDATE: this.PURDATE,
                PURTIME: this.PURTIME,
                TRANNO: this.TRANNO,
            };
            let bool = false;
            if (this.pagingDataList.length == 0) bool = true;
            const result_3076 = await get_3xxx(
                "3076",
                "可灵活分期付款交易撤销查询",
                appBody_3076,
                this,
                true,
                bool
            );
            // if (!result_3121) return false;
            // 如果传过来的为空, 则无下翻页 ,将下翻按钮禁用
            if (!result_3076) {
                if (this.pagingDataList.length != 0) {
                    this.$message.warning("已经到最后一条数据");
                }
                this.nextButtonFlag = true;
                this.tableData = []
                return false;
            }

            this.tableData = result_3076.body.appBody.dataList ? result_3076.body.appBody.dataList : [];
            this.showTrial = true;
            // 翻页设置
            ChangePage(this, ['PURDATE', 'VALDATE', 'PURTIME', 'TRANNO'], 'tableData', 10);
        },
        // 上下页切换
        handleChangePage(type) {
            this.currentRow = null;
            this.isChecked = {};
            if (type === 'pre') { // 切换到上一页
                if (this.currentPageIndex - 2 < 0) {
                    this.pagingDataList = []; // 清空缓存 申请编号 -> 相当于首次查询
                    this.VALDATE = '';
                    this.PURDATE = '';
                    this.PURTIME = '';
                    this.TRANNO = '';
                } else {
                    this.currentPageIndex = this.currentPageIndex - 2;
                    this.VALDATE = this.pagingDataList[this.currentPageIndex].VALDATE;
                    this.PURDATE = this.pagingDataList[this.currentPageIndex].PURDATE;
                    this.PURTIME = this.pagingDataList[this.currentPageIndex].PURTIME;
                    this.TRANNO = this.pagingDataList[this.currentPageIndex].TRANNO;
                }
                this.get_3076();
            } else { // 切换到下一页
                this.get_3076();
            }
        },
    },
};
</script>

<style lang='scss'>
.insAppli-contnair .el-form-item {
    text-align: center;
}
.installBillButton {
    text-align: center;
    margin-top: 10px;
    margin-bottom: 18px;
}
</style>
